<template>
   <div class="s-button">
      <button
         :disabled="disabled"
         :class="[type,{'not-pointer':disabled}]"
         @click="handleClick"
      >
        <span>
            <s-icon :type="icon" v-if="icon" style="margin-right: 4px;"/>
            <slot></slot>
        </span>
      </button>
   </div>
</template>

<script lang="ts" setup>
import { IconTypes } from "@types"
import { SIcon } from "@/components"
// 属性
interface Props {
   type?: "primary" | "danger" | "default" | "success";
   disabled?: boolean;
   icon?: IconTypes;
   name?:string; // 属性名称
   value?: boolean; // 属性值
}
const props = withDefaults(defineProps<Props>(), {
   type: "primary",
   disabled: false
})

// 方法
const emit = defineEmits(["click"])
const handleClick = () => {
   if (props.name) {
      emit("click", { name: props.name, value: !props.value })
   } else {
      emit("click")
   }
}
</script>

<style scoped lang="less">
   .s-button {
      display: inline-block;
      .not-pointer{
         cursor:not-allowed;
      }
      button {
         padding: 8px 12px;
         box-shadow: @smallShadow;
         border-radius: 2px;
         text-align: center;
         white-space: nowrap;
         cursor: pointer;
      }
      .primary{
         background: @primary;
         color:@white;
         &:hover{
            background: #096dd9
         }
      }
      .danger{
         background: @danger;
         color:@white;
         &:hover{
            background: #a8071a
         }
      }
      .default{
         background: @default;
         color: #1f1f1f;
         border: 1px solid rgba(0, 0, 0, 0.1);
         &:hover{
            background: #ededed
         }
      }
      .success{
         background: @success;
         color:@white;
         &:hover{
            background: #389e0d
         }

      }
   }
</style>
